<template>
  <div class="container">
    <div class="wrapper" v-for="(item, index) in cat" :key="index">
      <div class="title"><span></span>{{item.title}}</div>
      <div class="child" v-if="item.children">
        <detail-content :cat="item.children"></detail-content>
      </div>
    </div>
  </div>
</template>

<script>
export default {
  name: 'DetailContent',
  props: {
    cat: Array
  }
}
</script>

<style lang="stylus" scoped>
  .wrapper
    font-size 16px
    margin-top 12px
    margin-left 16px
    .title
      position relative
      padding-left .4rem
      span
        position absolute
        display inline-block
        width .36rem
        height .36rem
        background url('//s.qunarzz.com/piao/image/touch/sight/detail.png') 0 -.45rem no-repeat
        background-size: .4rem 3rem
        top 0px
        left -.08rem

</style>
